<template>
	<view>
		<view class="box">
			<view class="left">
				<view class="one" @click="btn()"><u-icon name="list" color="#fff" size="22"></u-icon></view>
				<view class="two">
					<view class="two-one" @click="changeBgc()" :style=" {'background':checked?'#19be6b':''}"><u-icon name="checkbox-mark" color="#fff" ></u-icon></view>
					<view v-if="dellist.length>0" @click="del" class="two-two"><u-icon name="trash" color="red" size="22"></u-icon></view>
				</view>
			</view>
			<view class="right" style="width: 200rpx;"><u-button text="上传文件" type="primary" size="small" icon="plus" @click="upload()"></u-button></view>
		</view>
		<view class="box-list">
			<view class="image-list" v-for="item in groupList">
				<view class="list-top" @click="btnchange(item)">
					<video class="image" v-if="test(item.url)" :src="item.url"></video>
					<image v-else class="image" :src="item.url" mode="aspectFit"></image>
					<view v-if="item.extJson==1" class="name"><u-icon name="checkbox-mark" color="#fff" size="60rpx"></u-icon></view>
				</view>
				<view class="list-title">{{ item.fileName }}</view>
			</view>
		</view>
		<view class="footer" v-if="dellist.length>0&source!=0" style="display: flex;align-items: center;justify-content: center;position: fixed;bottom: 60rpx;width: 100%;">
			<view class="" @click="goBack()" style="width: 600rpx;height: 80rpx;display: flex;align-items: center;justify-content: center;background-color: #3c9cff;border-radius: 40rpx;color: #fff;">
				选择完成，返回上一页
			</view>
		</view>
		<u-popup :show="show" overlayOpacity="0" mode="left" @close="close" customStyle="margin-top:110rpx;width:400rpx;background-color: #999" >
			<view class="popup">
				<view class="popup-addType"><view class="title"  @click="addFen()">添加分类</view></view>
				<view class="popup-list">
					<view class="list " :class="num == index ? 'active' : ''" v-for="(item, index) in titleList" >
						<view class="list-left" @click="change(item, index)">
							{{ item.filegroupname }}
						</view>
						<view class="list-right">
							<u-icon  name="edit-pen" color="red" size="22" @click.stop="editName(item)"></u-icon>
							<u-icon name="trash" color="red" size="22"  @click.stop="delName(item)"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-modal :show="show1" :title="title" :showCancelButton="true" @confirm="confirm" @cancel="show1 = false" >
			<view class="slot-content" >
				<u--input placeholder="请输入分类名称" border="surround" v-model="groupNameTitle"></u--input>
			</view>
		</u-modal>
	</view>
</template>

<script>
import { getFileByGroupTitle, searchPlugsByGroup,delPlugsFile,uploadFile,createFileGroup,updateFileGroupById,deleteFileGroup } from '../../../utils/api.js';
export default {
	data() {
		return {
			checked: false,
			show: false,
			show1: false,
			titleList: [],
			groupList: [],
			groupName: '',
			num: 0,
			dellist:[],
			changeList:[],
			source:0,
			changeItem:'',
			title:'新增分类',
			groupNameTitle:'',
			fileGroupName:'',
			status:0,
			type:'',
			total:0,
			page:1
		};
	},
	onLoad(option) {
		console.log(option)
		if(option.source){
			this.source = option.source;
		}
		if(option.type){
			this.type = option.type;
		}
		this.getTitleList();
	},
	onShow() {
		
	},
	
	
	onReachBottom() {
		if(this.groupList.length<this.total){
			this.page++;
			this.getGroupList();
		}
	},
	methods: {
		btn() {
			console.log('open');
			this.show = !this.show;
		},
		addFen(){
			console.log(123222);
			this.show1 = !this.show1;
			this.status = 0;
		},
		editName(item){
			console.log(item,11);
			this.show1 = !this.show1;
			this.status = 1;
			this.groupNameTitle=item.filegroupname
			this.fileGroupName=item.filegroupname
			this.title='修改分类'
		},
		delName(item){
			let data={
				groupName:item.filegroupname
			}
			deleteFileGroup(data).then((res) => {
				if (res.code == 200) {
					uni.showToast({
						icon: 'success',
						title: '删除成功'
					});
					this.show1 = false;
					setTimeout(() => {
						this.getTitleList();
					}, 500);
				}
			});
		},
		confirm() {
			if (this.status==0) {
				let data={
					groupName:this.groupNameTitle
				}
				createFileGroup(data).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'success',
							title: '添加成功'
						});
						this.groupNameTitle=''
						this.show1 = false;
						setTimeout(() => {
							this.getTitleList();
						}, 500);
					}
				});
			} else if(this.status==1) {
				let data={
					fileGroupName:this.fileGroupName,
					fileName:this.groupNameTitle,
					userServiceToken: uni.getStorageSync('userInfo').userServiceToken,
				}
				updateFileGroupById(data).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'success',
							title: '修改成功'
						});
						this.groupNameTitle=''
						this.show1 = false;
						setTimeout(() => {
							this.getTitleList();
						}, 500);
					}
				});
			}
		},
		
		
		changeBgc(){
			this.checked=!this.checked
			if(this.source==0){
				if(this.checked){
					if(this.groupList.length>=10){
						for(let i=0;i<10;i++){
							this.groupList[i].extJson=1
							this.dellist.push(this.groupList[i].id)
							this.changeList.push(this.groupList[i].url)
							console.log(this.groupList[i]);
						}
					}else{
						this.groupList.forEach((item)=>{
							item.extJson=1
							this.dellist.push(item.id)
							this.changeList.push(this.groupList[i].url)
						})
					}
					
				}else{
					this.groupList.forEach((item)=>{
						item.extJson=0
					})
					this.dellist=[]
					this.changeList=[]
				}
			}else if(this.source==1){
				if(this.checked){
					this.groupList.forEach((item)=>{
						item.extJson=0
					})
					this.groupList[0].extJson=1
					this.dellist.push(this.groupList[0].id)
					this.changeList.push(this.groupList[i].url)
				}else{
					this.groupList.forEach((item)=>{
						item.extJson=0
					})
					this.dellist=[]
					this.changeList=[]
				}
			}else if(this.source==2){
				if(this.checked){
					if(this.groupList.length>=10){
						for(let i=0;i<10;i++){
							this.groupList[i].extJson=1
							this.dellist.push(this.groupList[i].id)
							this.changeList.push(this.groupList[i].url)
							console.log(this.groupList[i]);
						}
					}else{
						this.groupList.forEach((item)=>{
							item.extJson=1
							this.dellist.push(item.id)
							this.changeList.push(this.groupList[i].url)
						})
					}
					
				}else{
					this.groupList.forEach((item)=>{
						item.extJson=0
					})
					this.dellist=[]
					this.changeList=[]
				}
			}
			
			
		},
		close() {
			this.show = false;
		},
		change(item, index) {
			this.num = index;
			this.groupName = item.filegroupname;
			this.getGroupList();
			this.show = false;
		},
		btnchange(item,index){
			if(this.source==0){
				if(item.extJson==0){
					if(this.changeList.length<10){
						item.extJson=1
						this.dellist.push(item.id)
						this.changeList.push(item.url)
					}else{
						uni.showModal({
							content:"本最多可选择10张",
							showCancel:false,
							success(succ) {
								
							}
						})
					}
				}else{
					item.extJson=0
					this.dellist.splice(this.dellist.indexOf(item.id),1)
					this.changeList.splice(this.changeList.indexOf(item.url),1)
					if(this.dellist.length==0){
						this.checked=false
					}
				}
			}else if(this.source==1){
				if(item.extJson==0){
					if(this.changeList.length==0){
						item.extJson=1
						this.dellist.push(item.id)
						this.changeList.push(item.url)
						// this.changeItem=item.url
					}else{
						uni.showModal({
							content:"本次最多可选择1张",
							showCancel:false,
							success(succ) {
								
							}
						})
					}
					
					
				}else{
					this.groupList.forEach((item)=>{
						item.extJson=0
					})
					this.dellist=[]
					this.changeList=[]
					console.log(this.dellist.length,666);
					this.checked=false
				}
				
			}else if(this.source==2){
				if(item.extJson==0){
					if(this.changeList.length<10){
						item.extJson=1
						this.dellist.push(item.id)
						this.changeList.push(item.url)
					}else{
						uni.showModal({
							content:"本最多可选择10张",
							showCancel:false,
							success(succ) {
								
							}
						})
					}
				}else{
					item.extJson=0
					this.dellist.splice(this.dellist.indexOf(item.id),1)
					this.changeList.splice(this.changeList.indexOf(item.url),1)
					if(this.dellist.length==0){
						this.checked=false
					}
				}
			}
			
			
		},
		goBack(){
			if(this.type=='goodsDetailsJson'){
				uni.$emit('goodsDetailsJson', this.changeList);
				uni.navigateBack();
			}else if(this.type=='rotationImgsJson'){
				uni.$emit('rotationImgsJson', this.changeList);
				uni.navigateBack();
			}else if(this.type=='videoUrl'){
				uni.$emit('videoUrl', this.changeList);
				uni.navigateBack();
			}else{
				console.log('add');
				uni.$emit('changeList', this.changeList);
				uni.navigateBack();
			}
			
		},
		getTitleList() {
			getFileByGroupTitle().then(res => {
				if (res.code == 200) {
					this.titleList = res.body;
					this.groupName = res.body[0].filegroupname;
					console.log(this.groupName);
					this.getGroupList();
				}
			});
		},
		test(item){
		  let videoRegex = /(\mp4|\avi|\mkv)$/i
		  // let imgRegex = /(\jpg|\jpeg|\png|\gif|\webp)$/i
		  // let docRegex = /(\zip|\doc|\pdf|\ppt|\pptx|\txt|\xls|\xlsx|\xlt|\xltx|\docx|\dwg\vsdx)$/
		  return videoRegex.test(item)
		},
		getGroupList() {
			let data = {
				groupName: this.groupName,
				page: this.page,
				size:50
			};
			searchPlugsByGroup(data).then(res => {
				if (res.code == 200) {
					if (this.page == 1) {
						this.groupList = [];
					}
					res.body.list.forEach(item=>{
						item.extJson=0
					})
					let arr = [];
					arr = this.groupList.concat(res.body.list);
					this.groupList = arr;
					this.total=res.body.total
					
				}
			});
		},
		upload(){
			let that=this
			uni.chooseImage({
				count: 9, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				loop: true,
				success: res => {
					console.log(res);
						
						res.tempFilePaths.forEach((item,index)=>{
							let data={
								file:item, //你要传的临时文件
								fileGroupName:that.groupName
							}
							uploadFile(data).then(ress=>{
								if(ress.code==200){
									this.getGroupList();
								}
							})
						})
					
			
				}
			});
		},
		del(){
			let that=this
			uni.showModal({
				title:'提示',
				content:"您确定要删除吗，一旦删除，图片无法找回！",
				success(succ) {
					if(succ.confirm){
						let data={
							ids:that.dellist.join()
						}
						console.log(data);
						delPlugsFile(data).then(res=>{
							if(res.code==200){
								that.getGroupList();
								that.dellist=[]
								that.checked=false
							}
						})
					}
				}
			})
			
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
	box-sizing: border-box;
}
.box {
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx;
	box-sizing: border-box;
	.left {
		display: flex;
		align-items: center;
		.one {
			width: 100rpx;
			height: 60rpx;
			background-color: #19be6b;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.two {
			margin-left: 60rpx;
			display: flex;
			align-items: center;
			.two-one {
				width: 34rpx;
				height: 34rpx;
				background-color: #e8eaec;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			.two-two {
			}
		}
	}
}
.box-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 20rpx;
	box-sizing: border-box;
	.image-list {
		width: 220rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		.list-top {
			width: 220rpx;
			height: 220rpx;
			border-radius: 20rpx;
			position: relative;
			.image {
				width: 220rpx;
				height: 220rpx;
				border-radius: 20rpx;
			}
			.name {
				width: 220rpx;
				height: 220rpx;
				background-color: rgba(0, 0, 0, 0.3);
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				left: 0;
				top: 0;
			}
		}
		.list-title {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			padding: 10rpx 20rpx;
			font-size: 26rpx;
			
		}
	}
}
.popup {
	.popup-addType {
		padding: 20rpx;
		margin-bottom: 20rpx;
		.title {
			border: 1rpx dashed #f5f5f5;
			color: #fff;
			padding: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.popup-list {
		.list {
			padding: 30rpx 0;
			display: flex;
			align-items: center;
			.list-left{
				width: 210rpx;
				padding-left: 50rpx;
				
			}
			.list-right{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-around
			}
			// text-align: center;
		}
		.active {
			background-color: #f5f5f5;
			border-left: 10rpx solid #3c9cff;
		}
	}
}
</style>
